<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<link rel="stylesheet" href="../css/loading.css" />
		<link rel="stylesheet" href="../css/organize-groups-add.css" />
		<style>
			[v-cloak] {
				display: none !important;
			}
			
			body，html {
				height: 100%;
			}
			/*确认创建群聊按钮设置*/
			
			.mui-bar-nav .mui-btn-link:active {
				color: #fff;
			}
			
			.mui-bar-nav .mui-btn-link:enabled:active {
				color: #fff;
				background-color: transparent;
			}
			
			.mui-bar-nav .mui-btn-blue:enabled:active {
				border: 0
			}
			/*搜索按钮文字设置*/
			
			input[type=search] {
				text-align: left;
				font-size: 14px;
				font-weight: initial;
			}
		</style>
	</head>

	<body>
		<div id="Loading">
			<div class="loader-inner ball-beat">
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
		<div id="mui-content" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="width: 45px;"></a>
				<h1 class="mui-title">新建群聊</h1>
				<button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" @click="btnCreateGroupChat" v-show="checkednums > 1">确定({{checkednums}})</button>
			</header>
			<div class="mui-content mui-scroll-wrapper" style="padding-bottom: 45px;">
				<div class="mui-input-row" id="groups-lay01">
					<input type="text" placeholder="请输入群名称" v-model="groupname" />
				</div>
				<div class="mui-input-row" id="groups-lay02">
					<!--<h5 class="mui-content-padded" v-show="checkednums > 0" style="margin-bottom: 0;">已选择{{checkednums}}人</h5>-->
					<div class="groups-nums">
						<span v-for="item in items">
							<span v-for="useritem in item.users" v-show="useritem.check" v-on:click="checkItem(useritem)">{{useritem.name}} </span>
						</span>
					</div>
				</div>
				<div class="mui-input-row" style="height: 50px; padding: 10px 10px 0; ">
					<input type="search" class="mui-input-clear" style="width:80%;background-color: rgba(239, 238, 243, .5);" v-model="search" placeholder="请输入姓名搜索">
					<button type="button" @click="searchQuerylist(search)" class="mui-btn mui-btn-primary" style="height: 32px; font-size: 14px;line-height: 5px;">搜索</button>
				</div>
				<div class="groups-list mui-scroll">
					<!--通讯目录-->
					<div v-show="!search" v-if="items.length !=0" v-for="item in items">
						<div class="title title-sz">
							{{item.name}}
						</div>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-checkbox" v-for="useritem in item.users">
								<div class="mui-col-xs-12 selectors" v-on:click="checkItem(useritem)">
									<img class="mui-media-object mui-pull-left" style="border-radius: 3px;" src="../images/qq.png">
									<div class="mui-col-xs-8 mui-media-body" style="font-size: 16px; line-height: 45px; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
										{{useritem.name}}{{useritem.partyJob ? '【'+useritem.partyJob+'】':''}}
									</div>
									</label>
									<input name="checkbox" value="" type="checkbox" :checked="useritem.check" :disabled="useritem.disabled">
								</div>
							</li>
						</ul>
					</div>
					<div v-show='flag'>
						<div class="title title-sz">
							通讯录
						</div>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-checkbox" v-for="useritem in searchlist">
								<div class="mui-col-xs-12 selectors" v-on:click="checkItem(useritem)">
									<img class="mui-media-object mui-pull-left" style="border-radius: 3px;" src="../images/qq.png">
									<div class="mui-col-xs-8 mui-media-body" style="font-size: 16px; line-height: 45px; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
										{{useritem.name}}{{useritem.partyJob ? '【'+useritem.partyJob+'】':''}}
									</div>
									</label>
									<input name="checkbox" value="" type="checkbox" :checked="useritem.check" :disabled="useritem.disabled">
								</div>
							</li>
							<li class="mui-table-view-cell mui-checkbox" v-show="err">
								<div class="mui-col-xs-12" style="text-align: center; font-size: 14px;">
									未找到相关数据
								</div>
							</li>
						</ul>
					</div>
				</div>

			</div>
			<!--<nav class="mui-bar mui-bar-tab" style="background: #fff;">
				<div class="mui-input-row" style="height: 50px; padding: 0 10px;">
					<input type="search" class="mui-input-clear" style="width:80%;background-color: rgba(239, 238, 243, .5);" v-model="search" placeholder="请输入姓名搜索">
					<button type="button" @click="searchQuerylist(search)" class="mui-btn mui-btn-primary" style="height: 27px; font-size: 14px;line-height: 3px;">搜索</button>
				</div>
			</nav>-->
		</div>
	</body>

</html>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../js/config.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/localStorage.js"></script>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
	var orglist;
	var loginid = localStorageFunc.get('applogininfo').id; // app登录用户id
	var loginname = localStorageFunc.get('applogininfo').name;
	var organizationslist = localStorageFunc.get('organize'); // 获取本地组织机构

	$.each(organizationslist.organizations, function(index, orgitem) {
		var userslist = [];
		$.each(organizationslist.users, function(index, useritem) {
			if(orgitem.id == useritem.organizationIds) {
				useritem.check = false; // 新增是否选择属性，默认为未选中状态
				userslist.push(useritem);
				useritem.disabled = false;

				if(useritem.id == loginid) {
					useritem.check = true; // 新增是否选择属性，默认为未选中状态
					useritem.disabled = true;
				}
			}
		});

		orgitem.users = userslist;
	});

	mui.plusReady(function() {

		/*plus.webview.currentWebview().setStyle({
			softinputMode: "adjustResize" // 弹出软键盘时自动改变webview的高度 ios下弹出软键盘后header会随着页面的滚动而消失在顶部
		});*/

		setTimeout(function() {
			document.body.removeChild(document.getElementById('Loading'));
		}, 200)

		var usersvm = new Vue({
			el: "#mui-content",
			data: {
				items: organizationslist.organizations,
				searchlist: '',
				flag: false,
				search: '',
				err: false,
				groupname: ''
			},
			watch: {
				search: function() { // 监听键入的值且清空之前的匹配列表
					this.searchlist = '';
					this.err = false;
				}
			},
			computed: {
				checkednums: function() { // 计算属性来获取已选择的人数，具有返回值
					var selected = 0;
					$.each(this.items, function(index, item) {
						var userslist = [];
						$.each(item.users, function(index, item) {
							if(item.check == true) {
								selected += 1;
							}
						});
					});

					return selected;
				}
			},
			methods: {

				//	切换选择状态
				checkItem: function(item) {
					if(item.id != loginid) {
						item.check = !item.check;
					}

					this.search = ''; // 关键字搜索切换选中后清除搜索关键字
				},

				//	创建群聊
				btnCreateGroupChat: function() {
					if(this.groupname == "") {
						mui.toast('请输入群名称');
						return;
					}

					var groupname = this.groupname;
					var usersids = [];
					$.each(this.items, function(index, item) {
						var userslist = [];
						$.each(item.users, function(index, item) {
							if(item.check == true) {
								usersids.push(item.id);
							}
						});
					});

					if(usersids.length == 1) {
						mui.toast('请先选择群成员');
						return;
					}

					var btn = ["确认", "取消"];
					mui.confirm(groupname, '创建群聊', btn, function(e) {
						if(e.index == 0) {
							ctdj.group.createGroup(groupname, usersids, function(r) {
								if(r.success) {
									var groupid = r.result;

									//	更新群聊会话列表
									var groupschats = plus.webview.getWebviewById('organize-groups');
									if(groupschats) {
										mui.fire(groupschats, 'refreshChat');
									}

									var msgcontentobj = {
										type: 'groupChat',
										data: {
											type: 'text', // 默认为文本
											content: '',
											sendee: groupid,
											sender: loginid
										},
										read: -1,
										name: loginname
									}

									//	推送到最近会话
									var msgchatPage = plus.webview.getWebviewById('/html/sub-message.html');
									if(msgchatPage) {
										console.log('对象：' + JSON.stringify(msgcontentobj));
										mui.fire(msgchatPage, 'newChatRectentMsg', msgcontentobj);
									}

									var showobj = {
										'groupid': groupid,
										'groupname': groupname,
									}

									//	更新群聊会话列表
									var groupschats = plus.webview.getWebviewById('organize-groups');
									if(groupschats) {
										mui.fire(groupschats, 'openImChat', showobj);
									}

									mui.back();
								}
							})
						}
					}, 'div');
				},

				//	人员搜索
				searchQuerylist: function(text) {
					if(!text) {
						mui.toast('请输入姓名进行搜索');
						return;
					}
					var searcharr = organizationslist.users;
					var userslist = [];
					$.each(searcharr, function(index, useritem) {
						if(useritem.name.indexOf(text) > -1) { // 匹配当前用户是否包含输入的关键字
							userslist.push(useritem);
						}
					});

					if(userslist.length) {
						this.flag = true;
						this.searchlist = userslist;
					} else {
						this.flag = true;
						this.searchlist = '';
						this.err = true;
					}
				}
			}
		});

		//	需要初始化滚动条
		mui('.mui-scroll-wrapper').scroll();
	})
</script>